<template>
  <div>
    <h2>vue3-study</h2>
    <h3>{{count}}</h3>
    <button @click="update">更新</button>
    <hr>
    <h3>姓名： {{user.name}}</h3>
    <h3>年龄： {{user.age}}</h3>
    <h3>性别： {{user.gender}}</h3>
    <h3>爱好： {{user.like}}</h3>
    <button @click="updateUser">更新</button>
  </div>
</template>

<script lang="ts">
// defineComponent 目的是定义一个组件
import { defineComponent, reactive, ref } from 'vue';

// 暴露出去定义好的组件
export default defineComponent({
  name: 'App',
  setup() {
    console.log("first setup");
    
    // count 对象是 Ref 类型的对象
    const count = ref(0)
    console.log(count);

    function update() {
      count.value++ 
    }

   // user 对象是 Proxy 类型的对象
    const user = reactive<any>({
      name: '老汉',
      age: 25, 
      like: {
        name: '龟孙',
        age: 23, 
        hobby: ['code', 'play game']
      }
    })
    const updateUser = () => {
        // user.name += '----'
        // user.age += 20
        // user.like.hobby[0] = 'art'
        user.like.hobby[3] = 'art111'
        user.gender = '男' 
        delete user.age
    }
  
    

    return {
      count,
      update,
      user,
      updateUser
    }
    
  }
});
</script>



